<template>
	<div>
		<div class="search">
			姓名/昵称：
			<el-input clearable v-model="page.realName" size="small" placeholder="请输入姓名/昵称"></el-input>

			<el-button icon="el-icon-search" @click="search" style="margin-left: 20px" size="small" type="primary">查询
			</el-button>

			<el-button @click="showAdd" icon="el-icon-plus" style="margin-left: 30px" size="small" type="success">新增用户
			</el-button>
		</div>

		<div style="padding-top: 30px">
			<el-table
					:data="userList"
					border
					style="width: 100%">
				<el-table-column
						fixed
						label="用户账号"
						show-overflow-tooltip
						align="center">
					<template slot-scope="scope">
						<el-tag size="mini" v-show="scope.row.id===user.id" type="success">当前</el-tag>
						<span v-html="scope.row.loginName"></span>
					</template>
				</el-table-column>
				<el-table-column
						prop="realName"
						show-overflow-tooltip
						label="用户姓名"
						align="center">
				</el-table-column>
				<el-table-column
						prop="lastLoginTime"
						label="上次登录"
						show-overflow-tooltip
						align="center">
					<template slot-scope="scope">
						<span v-html="scope.row.lastLoginTime?scope.row.lastLoginTime:'无'"></span>
					</template>
				</el-table-column>

				<el-table-column
						prop="createTime"
						label="注册时间"
						show-overflow-tooltip
						align="center">
				</el-table-column>

				<el-table-column
						prop="updateTime"
						label="修改时间"
						show-overflow-tooltip
						align="center">
				</el-table-column>

				<el-table-column
						prop="status"
						label="账号状态"
						show-overflow-tooltip
						align="center">
					<template slot-scope="scope">
						<el-tag :type="scope.row.status===1?'':'danger'">{{ scope.row.status === 1 ? '正常' : '已封禁' }}
						</el-tag>
					</template>
				</el-table-column>

				<el-table-column
						fixed="right"
						label="操作"
						align="center">
					<template slot-scope="scope" v-if="scope.row.id!==1">
						<el-button icon="el-icon-edit" @click="showEdit(scope.row)" type="text" size="small">修改
						</el-button>
						<el-button type="text" size="small" icon="el-icon-delete" @click="deleteById(scope.row.id)">删除
						</el-button>
						<el-button type="text" size="small" icon="el-icon-eleme" @click="reset(scope.row.id)">重置密码
						</el-button>

						<el-button icon="el-icon-warning" type="text" @click="changeStatus(scope.row.id)" size="small"
								   slot="reference">
							{{ scope.row.status === 1 ? '封禁' : '解封' }}
						</el-button>

					</template>
				</el-table-column>
			</el-table>
		</div>

		<!--分页-->
		<div style="padding-top: 50px;text-align: center">
			<el-pagination
					class="pagiantion"
					:total="total"
					@current-change="handleSelectionChange"
					:current-page="page.pageIndex"
					:page-size="page.pageSize"
					layout="total, prev, pager, next, jumper"
			>
			</el-pagination>
		</div>

		<el-dialog
				title="修改用户"
				:visible.sync="centerDialogVisible"
				width="30%"
				:before-close="beforeClose"
				center>
			<div style="text-align: center">
				<div>
					登陆账号：
					<el-input maxlength="12" disabled v-model="editUser.loginName" placeholder="请输入登录账号"
							  size="small"></el-input>
				</div>
				<div style="margin-top: 20px">
					用户姓名：
					<el-input maxlength="4" v-model="editUser.realName" placeholder="请输入用户姓名" size="small"></el-input>
				</div>
				<div style="margin-top: 20px">
					角色信息：
					<el-select size="small" v-model="editUser.roleId" multiple placeholder="请选择角色">
						<el-option
								v-for="item in roleList"
								:key="item.id"
								:label="item.roleName"
								:value="item.id">
						</el-option>
					</el-select>
				</div>

			</div>
			<span slot="footer" class="dialog-footer">
    <el-button @click="beforeClose">取 消</el-button>
    <el-button type="primary" @click="submitEdit">确 定</el-button>
  </span>
		</el-dialog>

		<el-dialog
				title="新增用户"
				:visible.sync="centerDialogVisible2"
				width="30%"
				center>
			<div style="text-align: center">
				<div>
					登陆账号：
					<el-input maxlength="12" v-model="addUser.loginName" placeholder="请输入登录账号" size="small"></el-input>
				</div>
				<div style="margin-top: 20px">
					用户密码：
					<el-input maxlength="12" v-model="addUser.password" placeholder="密码由6-12位数字、字母组成"
							  size="small"></el-input>
				</div>
				<div style="font-size: 10px;color: #8c939d;margin-top: 5px">
					注：密码不填默认是123456
				</div>
				<div style="margin-top: 20px">
					用户姓名：
					<el-input maxlength="4" v-model="addUser.realName" placeholder="请输入用户姓名" size="small"></el-input>
				</div>
				<div style="margin-top: 20px">
					角色信息：
					<el-select size="small" v-model="addUser.roleId" multiple placeholder="请选择角色">
						<el-option
								v-for="item in roleList"
								:key="item.id"
								:label="item.roleName"
								:value="item.id">
						</el-option>
					</el-select>
				</div>

			</div>
			<span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="submitAdd">确 定</el-button>
  </span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		name: "user",
		data() {
			return {
				centerDialogVisible: false,
				centerDialogVisible2: false,
				page: {
					pageIndex: 1,
					pageSize: 8,
					realName: null
				},
				userList: [],
				total: 0,
				user: {},
				editUser: {},
				addUser: {},
				roleList: [],
			}
		},
		methods: {
			beforeClose() {
				this.centerDialogVisible = false
				this.findPage();
			},
			submitAdd() {
				this.axios.post('/user/add', this.addUser).then(res => {
					if (res.data.code === 200) {
						this.centerDialogVisible2 = false;
						this.findPage();
						this.$message.success(res.data.message);
					}
				})
			},
			showAdd() {
				this.addUser = {};
				this.centerDialogVisible2 = true;
			},
			search() {
				this.page.pageIndex = 1;
				this.findPage();
			},
			submitEdit() {
				this.axios.post('/user/edit', this.editUser).then(res => {
					if (res.data.code === 200) {
						this.centerDialogVisible = false;
						this.findPage();
						this.$message.success(res.data.message);
					}
				})
			},
			showEdit(obj) {
				this.editUser = obj;
				this.centerDialogVisible = true;
			},
			deleteById(userId) {
				this.$confirm('确定删除此账号吗, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.get('/user/deleteById?userId=' + userId).then(res => {
						if (res.data.code === 200) {
							this.findPage();
							this.$message.success(res.data.message);
						}
					})
				})
			},
			reset(userId) {
				this.$confirm('确定重置此账号密码吗, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.get('/user/reset?userId=' + userId).then(res => {
						if (res.data.code === 200) {
							this.$message.success(res.data.message);
						}
					})
				})
			},
			changeStatus(userId) {
				this.$confirm('确定执行此操作吗, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.get('/user/changeStatus?userId=' + userId).then(res => {
						if (res.data.code === 200) {
							this.findPage();
							this.$message.success(res.data.message);
						}
					})
				})
			},
			findPage() {
				this.axios.post('/user/findPage', this.page).then(res => {
					if (res.data.code === 200) {
						this.userList = res.data.data.data;
						this.total = res.data.data.total;
					}
				})
			},
			handleSelectionChange(currentPage) {
				this.page.pageIndex = currentPage;
				this.findPage();
			},
			findRoleList() {
				this.axios.post('/role/findAll').then(res => {
					if (res.data.code === 200) {
						this.roleList = res.data.data;
					}
				})
			}
		},
		created() {
			this.findPage();
			this.findRoleList();
		},
		mounted() {
			this.user = JSON.parse(sessionStorage.getItem('user'))
		}
	}
</script>

<style scoped>
	.search {

	}

	.el-input {
		width: 250px;
	}

	.el-select {
		width: 250px;
	}
</style>